
<template>
  <div class="meal-set-shop">
    <div class="content">
      <Row type='flex'
           justify='end'
           align="middle"
           style='padding:20px'>
        <Col style="margin-right:20px;"><span>套餐类型:</span></Col>
        <Col style="margin-right:20px;"> <Select v-model="pkgTypes"
                style="width:200px">
          <Option v-for="item in cityList"
                  :value="item.value"
                  :key="item.value">{{ item.label }}</Option>
        </Select></Col>
        <Col style="margin-right:20px;"><Button type="primary"
                @click="search"
                style="width:80px;">查询</Button></Col>
        <Col><Button type="primary"
                @click="addpkg"
                style="width:80px;">添加</Button></Col>
      </Row>
      <div class="content_list">
        <Table stripe
               :height="this.tableHeight"
               ref="selection"
               class="table-list"
               :loading="loading"
               :columns="columns7"
               :data="datalist"
               id="mygrid">
          <template slot-scope="{ row,index }"
                    slot="sort">
            <div style="cursor:pointer">
              <span style="cursor:pointer">
                <Input v-model="row.sort"
                       :maxlength="4"
                       ref="inputValidate"
                       @on-keyup.stop="ketupsort(row.sort,row)"
                       @on-blur.stop="blursort(row,row.sort)" />
              </span>
              <!-- <span @click.stop="selectsort(row,index)"
                    style="cursor:pointer"
                    v-if="!row.sortShow">{{row.sort}}</span> -->
            </div>
          </template>
          <template slot-scope="{ row }"
                    slot="pkgName">
            <p class="collection-productdesc">{{ row.pkgName }}</p>
          </template>
          <template slot-scope="{ row }"
                    slot="pkgType">
            <span>
              {{['购币套餐','办卡套餐','水吧套餐','','促销套餐'][row.pkgType]}}
            </span>
          </template>
          <template slot-scope="{ row }"
                    slot="productQty">
            <span>
              {{row.pkgType === 4 && row.gameCoupons.length > 0 ? row.gameCoupons[0].round : ''}}
            </span>
          </template>
          <template slot-scope="{ row }"
                    slot="productName">
            <span>
              {{row.pkgType === 4 && row.gameCoupons.length > 0 ? row.gameCoupons[0].name : ''}}
            </span>
          </template>
          <template slot-scope="{ row }"
                    slot="validPeriod">
            <span>
              {{row.pkgType === 4 && row.gameCoupons.length > 0 ? row.gameCoupons[0].validPeriod : ''}}
            </span>
          </template>
          <template slot-scope="{ row }"
                    slot="startTime">
            <span>
              {{row.pkgBeginDate+' '+row.pkgBeginTime}}
            </span>
          </template>
          <template slot-scope="{ row }"
                    slot="endTime">
            <span>
              {{row.pkgEndDate+' '+row.pkgEndTime}}
            </span>
          </template>
          <template slot-scope="{ row,index }"
                    slot="status">
            <span>
              <i-Switch v-model="row.status"
                        @on-change="selectstatus(row,index)">
                <span slot="open">开</span>
                <span slot="close">关</span>
              </i-Switch>
            </span>
          </template>
          <template slot-scope="{ row }"
                    slot="action">
            <i class="iconsys icondetail"
               title="查看详情"
               @click="detailsShow(row.pkgCode)">
            </i>
            <i class="iconsys iconedit"
               title="编辑"
               @click="uptShow(row.pkgCode,row.pkgId)">
            </i>
            <Poptip confirm
                    title="你确定要删除吗？"
                    class="poptip_del"
                    @on-ok="ok(row.pkgId,row)"
                    @on-cancel="cancel">
              <i class="iconsys icondel"
                 title="删除">
              </i>
            </Poptip>
          </template>
        </Table>
      </div>
      <div>
        <div class="content_page">
          <Page :total="total"
                ref="pages"
                :loading="loading"
                :current="data.offset"
                @on-change="selectPage"
                :page-size="data.limit"
                @on-page-size-change="selectSize"
                class-name="page"
                show-sizer
                show-total />
        </div>
      </div>
    </div>
    <Drawer v-model="value3"
            :transfer='false'
            :title="title"
            :mask-closable="true"
            id="shopDrawerLong"
            class="shopDrawer"
            @on-close="closed"
            width="540">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="100"
            class="shopDrawer_form"
            v-if="isTrue">
        <FormItem label="套餐名称:"
                  prop="pkgName">
          <Input v-model="formValidate.pkgName"
                 :maxlength="14"
                 @on-keyup="changeName"
                 placeholder="最多输入14字"
                 class="popupcontent_input"></Input>
        </FormItem>
        <FormItem label="套餐类型:"
                  prop="pkgType">
          <Select v-model="formValidate.pkgType"
                  @on-change='changeMealType'
                  :disabled="title==='编辑商品'"
                  placeholder="请选择"
                  class="popupcontent_input">
            <Option value='0'>购币套餐</Option>
            <Option value="1">办卡套餐</Option>
            <Option value="4">促销套餐</Option>
          </Select>
        </FormItem>
        <FormItem label="游戏券类型:"
                  v-show="formValidate.pkgType === '4'"
                  prop="gameType">
          <Select v-model="formValidate.gameType"
                  @on-change='changeGameType'
                  :disabled="title==='编辑商品'"
                  placeholder="请选择"
                  class="popupcontent_input">
            <Option :value='item.value'
                    v-for="(item,idx) in gameTypeList"
                    :key='idx'>{{item.label}}</Option>
          </Select>
        </FormItem>
        <FormItem label="关联游戏券:"
                  v-show="formValidate.pkgType === '4'"
                  prop="relatedGame">
          <Input v-model="formValidate.relatedGame"
                 :readonly='true'
                 @on-focus='inputFocus'
                 @on-blur='inputBlur'
                 placeholder="请选择"
                 class="popupcontent_input"></Input>
        </FormItem>
        <FormItem label="游戏券金额:"
                  v-show="formValidate.pkgType === '4'"
                  prop="gameTicketPrice">
          <Input v-model="formValidate.gameTicketPrice"
                 :disabled='true'
                 placeholder="0.00"
                 class="popupcontent_input"></Input>
          <span style="padding-left:8px;">元</span>
        </FormItem>
        <FormItem label="总出币数:"
                  prop="coinNum">
          <Input v-model="formValidate.coinNum"
                 :maxlength="6"
                 @on-keyup="changecoinNum"
                 @on-blur="pricecoinNum"
                 placeholder="输入范围为1~999999"
                 class="popupcontent_input"></Input>
          <span style="padding-left:8px;">枚</span>
        </FormItem>
        <FormItem label="游戏币金额:"
                  prop="gameCoinPrice">
          <Input v-model="formValidate.gameCoinPrice"
                 @on-blur="priceBlur"
                 @on-keyup="changeprice"
                 :maxlength="7"
                 placeholder="输入范围为0.00~9999.99"
                 class="popupcontent_input"></Input>
          <span style="padding-left:8px;">元</span>
        </FormItem>
        <FormItem label="收款金额:"
                  prop="pkgPrice">
          <!-- <Input v-model="formValidate.pkgPrice" :disabled='true'
                 :maxlength="7"
                 placeholder="输入范围为0.00~9999.99"
                 @on-blur="priceBlur"
                 @on-keyup="changeprice"
                 class="popupcontent_input"></Input> -->
          <Input v-model="formValidate.pkgPrice"
                 :disabled='true'
                 placeholder="0.00"
                 class="popupcontent_input"></Input>
          <span style="padding-left:8px;">元</span>
        </FormItem>
        <FormItem label="有效日期:"
                  prop="startTime">
          <DatePicker type="daterange"
                      :disabled="formValidate.pkgType ==='4'"
                      v-model='formValidate.startTime'
                      @on-change="selectStartTime"
                      placement="bottom-start"
                      class="popupcontent_input"
                      placeholder="请选择"
                      :editable="false"></DatePicker>
        </FormItem>
        <FormItem label="有效时间:"
                  prop="endTime">
          <!-- <DatePicker type="datetime"
                      v-model="formValidate.endTime"
                      @on-change="selectEndTime"
                      :options="disabledEnd"
                      format="yyyy-MM-dd HH:mm:ss"
                      class="popupcontent_input"
                      :editable="false"></DatePicker> -->
          <TimePicker format="HH:mm:ss"
                      :disabled="formValidate.pkgType ==='4'"
                      v-model="formValidate.endTime"
                      placeholder="请选择"
                      @on-change="selectEndTime"
                      type="timerange"
                      placement="bottom-start"
                      class="popupcontent_input"
                      :editable="false"></TimePicker>
        </FormItem>
        <FormItem label="限制购买:" prop="rightsType" v-if="formValidate.pkgType === '0' || formValidate.pkgType === '4'">
          <CheckboxGroup v-model="formValidate.rightsType">
            <Checkbox label="1">SVIP专属商品</Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="启用状态:"
                  prop="status">
          <RadioGroup v-model="formValidate.status">
            <Radio label="1">是</Radio>
            <Radio label="0"
                   style="margin-left:53px">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="渠道:"
                  v-show="formValidate.pkgType"
                  prop="way">
          <CheckboxGroup v-model="formValidate.way">
            <Checkbox label="1">收银台</Checkbox>
            <Checkbox label="2"
                      style="margin-left:30px"
                      v-show="formValidate.pkgType === '4'">一体机</Checkbox>
                      <Checkbox label="4"
                      style="margin-left:30px"
                      v-show="formValidate.pkgType === '4'">微信</Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="上传图片:"
                  v-if='waySelect'
                  prop="imgUrl"
                  class="set_ct_form_up">
          <div style="display:flex"
               class='load-container'>
            <Upload ref="upload"
                    :format="['jpg','png', 'gif']"
                    :max-size="500"
                    :on-success="handleSuccess"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    type="drag"
                    :show-upload-list="false"
                    :action="$config.uploadImg"
                    style="display: inline-block;width:96px;">
              <img :src="formValidate.imgUrl?formValidate.imgUrl:defaultUrl"
                   style="display: inline-block;width:96px;height:96px;vertical-align: top;"
                   alt="">
              <p v-if="formValidate.imgUrl"
                 class="replace_tit">更换</p>
            </Upload>
            <div style="width:150px;height:72px;line-height:18px;color: #464C5B;margin-left:24px;">
              <p>支持格式：.jpg、.png、.gif</p>
              <p>大小：≤500KB</p>
              <p>仅允许上传1张</p>
            </div>
          </div>
        </FormItem>
        <FormItem label="说明:"
                  class="pkgDes"
                  prop="pkgDesc">
          <Input v-model="formValidate.pkgDesc"
                 :maxlength="300"
                 type="textarea"
                 :autosize="{minRows: 4,maxRows: 6}"
                 class="popupcontent_input">
          </Input>
          <span class="rol_tipsd"
                style="padding-right:30px;">{{formValidate.pkgDesc.length?formValidate.pkgDesc.length:0}}/300</span>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer shopDrawer_form_btn"
           v-if="isTrue">
        <Button style="margin-right: 8px"
                @click="handleReset">取消</Button>
        <Button type="primary"
                @click="handleSubmit"
                :disabled='isDisabled'>确认</Button>
      </div>
      <div class="shop_detail"
           v-if="!isTrue">
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">套餐名称:</span><span class="shop_detail_tit_info">{{formValidate.pkgName}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">套餐类型:</span><span class="shop_detail_tit_info">{{['购币套餐','办卡套餐','水吧套餐','','促销套餐'][formValidate.pkgType]}}</span></div>
        <div class="shop_detail_tit"
             v-if="formValidate.pkgType === '4'"><span class="shop_detail_tit_name">游戏券类型:</span><span class="shop_detail_tit_info">{{['','次卡','券包'][formValidate.gameType]}}</span></div>
        <div class="shop_detail_tit"
             v-if="formValidate.pkgType === '4'"><span class="shop_detail_tit_name">关联游戏券:</span><span class="shop_detail_tit_info">{{formValidate.relatedGame}}</span></div>
        <div class="shop_detail_tit"
             v-if="formValidate.pkgType === '4'"><span class="shop_detail_tit_name">游戏券金额:</span><span class="shop_detail_tit_info">{{formValidate.gameTicketPrice}}元</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">总出币数:</span><span class="shop_detail_tit_info">{{formValidate.coinNum}}枚</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">游戏币金额:</span><span class="shop_detail_tit_info">{{formValidate.gameCoinPrice}}元</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">收款金额:</span><span class="shop_detail_tit_info">{{formValidate.pkgPrice}}元</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">开始时间:</span><span class="shop_detail_tit_info">{{formValidate.pkgBeginDate+' '+formValidate.pkgBeginTime}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">结束时间:</span><span class="shop_detail_tit_info">{{formValidate.pkgEndDate+' '+formValidate.pkgEndTime}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">启用状态:</span><span class="shop_detail_tit_info">{{['否','是'][formValidate.status]}}</span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">渠道:</span><span class="shop_detail_tit_info">{{channelName}}</span></div>
        <div class="shop_detail_tit"
             v-if="formValidate.pkgType === '4' && (formValidate.way.indexOf('2') !== -1 || formValidate.way.indexOf('4') !== -1)"><span class="shop_detail_tit_name">图片:</span><span class="shop_detail_tit_info"><img :src="formValidate.imgUrl"
                 alt=""
                 style="width:96px;height:96px"></span></div>
        <div class="shop_detail_tit"><span class="shop_detail_tit_name">说明:</span><span class="shop_detail_tit_info">{{formValidate.pkgDesc}}</span></div>
        <div class="demo-drawer-footer shopDrawer_form_btn">
          <Button type="primary"
                  @click="Submit"
                  style="width:72px;margin-left:20px;margin-right:24px;">返回</Button>
        </div>
      </div>
    </Drawer>
    <Drawer title="选择优惠券"
            v-model="drawStatus"
            width='580'
            :transfer='false'>
      <div>
        <Table :columns="relatedColumns"
               :data="relatedData"
               highlight-row
               ref="currentRowTable"
               @on-current-change='changeSelect'
               :height="drawTableHeight">
          <template slot-scope="{ row }"
                    slot="time">
            <span>{{ row.listingTime }} - {{ row.delistingTime }}</span>
          </template>
          <template slot="radio">
            <input type="radio"
                   name='radio'
                   class="radioMeal" />
          </template>
        </Table>
        <Row type="flex"
             justify="end"
             style="padding-top:20px">
          <Col>
          <Page :total="totalRelated"
                ref="pages"
                :page-size='pageSize'
                :current='pageIndex'
                @on-change="selectrelatePage"
                @on-page-size-change="selectRelateSize"
                show-sizer
                show-total />
          </Col>
        </Row>
      </div>
      <div class="demo-drawer-footer footer1">
        <Button style="margin-right: 8px"
                @click="drawStatus = false">取消</Button>
        <Button type="primary"
                @click="sureRelateSelect">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  getSalesPackageList,
  updateSortList,
  createSalesPackage,
  lookSalesPackage,
  delSalesPackage,
  openSalesPackage,
  mealRelatedList
} from '@/api/setting'
export default {
  data () {
    return {
      channelName: '',
      drawTableHeight: 0,
      selectedIndex: 0,
      gameCouponCode: '',
      sortShow: false,
      modalGameCouponCode: '',
      relatedItem: {},
      modalRelatedItem: {},
      totalRelated: 0,
      pageSize: 10,
      pageIndex: 1,
      pkgTypes: '0,1,4',
      cityList: [
        { value: '0,1,4', label: '全部' },
        { value: '0', label: '购币套餐' },
        { value: '1', label: '办卡套餐' },
        { value: '4', label: '促销套餐' }
      ],
      relatedData: [],
      relatedColumns: [
        {
          title: '',
          slot: 'radio',
          width: 25
        },
        {
          title: '游戏券名称',
          key: 'name',
          width: 100
        },
        {
          title: '局数',
          key: 'round',
          width: 80
        },
        {
          title: '金额(元)',
          key: 'price',
          width: 80
        },
        {
          title: '有效时间',
          key: 'validPeriod'
        },
        {
          title: '上下架时间',
          slot: 'time',
          width: 155
        }
      ],
      gameTypeList: [
        { value: '2', label: '券包' },
        { value: '1', label: '次卡' }
      ],
      tableHeight: 0,
      value3: false,
      total: 10,
      title: '添加商品',
      loading: true,
      isDisabled: false,
      isDelete: true,
      disabledStart: {},
      disabledEnd: {},
      data: {
        offset: 1,
        limit: 10,
        pkgTypes: this.pkgTypes,
        merchantId: this.$store.state.user.merchantId,
        shopId: this.$route.query.id
      },
      isTrue: true,
      columns7: [
        {
          title: '套餐名称',
          slot: 'pkgName'
        },
        {
          title: '套餐类型',
          align: 'center',
          slot: 'pkgType',
          width: 100
        },
        {
          title: '购币金额',
          key: 'pkgPrice',
          align: 'center'
        },
        {
          title: '总出币数',
          key: 'coinNum',
          align: 'center',
          width: 100
        },
        {
          title: '局数',
          slot: 'productQty',
          align: 'center',
          width: 80
        },
        {
          title: '劵名称',
          slot: 'productName',
          align: 'center'
        },
        {
          title: '有效期',
          slot: 'validPeriod',
          align: 'center'
        },
        {
          title: '排序',
          key: 'sort',
          slot: 'sort',
          align: 'center',
          width: 100
        },
        {
          title: '开始时间',
          slot: 'startTime',
          align: 'center'
        },
        {
          title: '结束时间',
          slot: 'endTime',
          align: 'center'
        },
        {
          title: '启用状态',
          align: 'center',
          slot: 'status',
          width: 100
        },
        {
          title: '操作',
          key: 'action',
          width: 140,
          slot: 'action'
        }
      ],
      datalist: [],
      showalert: false,
      pkgId: '', // 修改时id
      defaultUrl: require('@/assets/images/add.png'),
      waySelect: false,
      // gameTicketSelect: false,
      drawStatus: false,
      formValidate: {
        imgUrl: '',
        way: [], // 渠道
        gameCoinPrice: '', // 游戏币金额
        gameTicketPrice: '0.00', // 游戏券金额
        relatedGame: '', // 关联游戏券
        gameType: '', // 游戏券类型
        pkgName: '', // 套餐名字
        pkgPrice: '0.00', // 收款金额
        pkgType: '', // 套餐类型
        coinNum: '', // 总出币数
        startTime: [],
        endTime: [],
        pkgBeginDate: '', // 开始日期
        pkgEndDate: '', // 结束日期
        pkgBeginTime: '', // 开始时间
        pkgEndTime: '', // 结束时间
        shopId: this.$route.query.id,
        merchantId: this.$store.state.user.merchantId,
        rightsType: [], // svip
        status: '1', // 是否启用
        pkgDesc: '', // 说明
        creator: '' // 创建人
      },
      ruleValidate: {
        pkgName: [
          {
            required: true,
            message: '套餐名称不能为空',
            trigger: 'change'
          }
        ],
        pkgType: [
          {
            required: true,
            message: '套餐类型不能为空',
            trigger: 'change'
          }
        ],
        gameType: [
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.formValidate.pkgType === '4') {
                if (!value) {
                  callback(new Error('游戏券类型不能为空'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            }
          }
        ],
        relatedGame: {
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (this.formValidate.pkgType === '4') {
              if (!value) {
                callback(new Error('关联游戏券不能为空'))
              } else {
                callback()
              }
            } else {
              callback()
            }
          }
        },
        gameTicketPrice: {
          required: true,
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (this.formValidate.pkgType === '4') {
              if (!value) {
                callback(new Error('游戏券金额不能为空'))
              } else {
                callback()
              }
            } else {
              callback()
            }
          }
        },
        imgUrl: {
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (this.formValidate.pkgType === '4' && (this.formValidate.way.indexOf('2') !== -1 || this.formValidate.way.indexOf('4') !== -1)) {
              if (!value) {
                callback(new Error('上传图片不能为空'))
              } else {
                callback()
              }
            } else {
              callback()
            }
          }
        },
        gameCoinPrice: [
          {
            required: true,
            message: '游戏币金额不能为空',
            trigger: 'change'
          },
          {
            required: true,
            message: '可输入范围为0.00到9999.99之间',
            trigger: 'blur',
            pattern: /^\d{1,4}(\.\d{1,2})?$/
          }
        ],
        way: {
          required: true,
          message: '请选择渠道'
        },
        pkgPrice: [
          {
            required: true,
            type: 'string',
            message: '收款金额不能为空',
            trigger: 'blur'
          }
          // {
          //   required: true,
          //   message: '可输入范围为0.00到9999.99之间',
          //   trigger: 'blur',
          //   pattern: /^\d{1,4}(\.\d{1,2})?$/
          // }
        ],
        coinNum: [
          {
            required: true,
            type: 'string',
            message: '总出币数不能为空',
            trigger: 'change'
          },
          {
            required: true,
            message: '可输入范围为1到999999之间',
            trigger: 'blur',
            pattern: /^[1-9][0-9]{0,5}$/
          }
        ],
        startTime: [
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (!this.formValidate.startTime.join('')) {
                callback(new Error('有效日期不能为空'))
              } else {
                callback()
              }
            }
          }
        ],
        endTime: [
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.formValidate.endTime.join('')) {
                callback()
              } else {
                callback(new Error('有效时间不能为空'))
              }
            }
          }
        ],
        status: [
          {
            required: true,
            message: '启用状态不能为空',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    'formValidate.way' (val) {
      if (val) {
        if (val.indexOf('2') !== -1 || val.indexOf('4') !== -1) {
          this.waySelect = true
        } else {
          this.waySelect = false
        }
      }
    },
    'formValidate.gameCoinPrice' (val) {
      if (this.formValidate.pkgType === '4') {
        this.formValidate.pkgPrice = (Math.round(Number(this.formValidate.gameTicketPrice) * 100 + Number(this.formValidate.gameCoinPrice) * 100) / 100).toFixed(2) + ''
      } else {
        this.formValidate.pkgPrice = this.formValidate.gameCoinPrice
      }
    },
    drawStatus (status) {
      if (!status) {
        this.pageIndex = 1
        this.pageSize = 10
      }
    },
    value3 (status) {
      if (!status) {
        this.formValidate = {
          // pkgName: '', // 套餐名字
          // pkgPrice: '0.00', // 收款金额
          // pkgType: '', // 套餐类型
          // coinNum: '', // 总出币数
          // startTime: [],
          // endTime: [],
          // pkgBeginDate: '', // 开始日期
          // pkgEndDate: '', // 结束日期
          // pkgBeginTime: '', // 开始时间
          // pkgEndTime: '', // 结束时间
          // shopId: this.$route.query.id,
          // merchantId: this.$store.state.user.merchantId,
          // status: '1', // 是否启用
          // pkgDesc: '', // 说明
          // creator: '' // 创建人
          imgUrl: '',
          way: [], // 渠道
          gameCoinPrice: '', // 游戏币金额
          gameTicketPrice: '0.00', // 游戏券金额
          relatedGame: '', // 关联游戏券
          gameType: '', // 游戏券类型
          pkgName: '', // 套餐名字
          pkgPrice: '0.00', // 收款金额
          pkgType: '', // 套餐类型
          coinNum: '', // 总出币数
          startTime: [],
          endTime: [],
          pkgBeginDate: '', // 开始日期
          pkgEndDate: '', // 结束日期
          pkgBeginTime: '', // 开始时间
          pkgEndTime: '', // 结束时间
          shopId: this.$route.query.id,
          merchantId: this.$store.state.user.merchantId,
          status: '1', // 是否启用
          pkgDesc: '', // 说明
          creator: '' // 创建人
        }
      }
    }
  },
  mounted () {
    this.getList()
    if (!this.hasPermission('moms:setting:package')) {
      this.$router.replace({ name: 'error_401' })
    }
  },
  methods: {
    entersort (row) {
    },
    isselect () {
      this.datalist.forEach(ele => {
        this.$set(ele, 'sortShow', false)
      })
    },
    ketupsort (sort, row) {
      var res = String(sort)
      if (sort.length === 1) {
        res = sort.replace(/[^0-9]/g, '')
      } else {
        res = sort.replace(/^(0+)|[^\d]+/g, '')
      }
      row.sort = res
    },
    selectsort (row, idx) {
      this.selectedIndex = idx
      // row.sortShow = true
      this.datalist.forEach(ele => {
        this.$set(ele, 'sortShow', false)
      })
      this.$set(this.datalist[idx], 'sortShow', true)
      // console.log(this.datalist)
      this.$nextTick(() => {
        this.$refs.inputValidate.focus()
      })
    },
    blursort (e, sort) {
      e.sortShow = false
      var res = String(sort)
      if (sort.length === 1) {
        res = res.replace(/[^0-9]/g, '')
      } else {
        res = res.replace(/^(0+)|[^\d]+/g, '')
      }
      e.sort = res
      if (e.sort) {
        updateSortList({
          shopId: this.$route.query.id,
          merchantId: this.$store.state.user.merchantId,
          pkgId: e.pkgId,
          sort: e.sort
        }).then(res => {
          if (res.data.status === 200) {
            // this.$Message.success(`套餐开启成功`)
            this.data.offset = 1
            this.data.limit = 10
            this.getList()
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      } else {
        this.data.offset = 1
        this.data.limit = 10
        this.getList()
      }
    },
    // 确认选=选择关联的数据
    search () {
      this.data.offset = 1
      this.data.limit = 10
      this.getList()
    },
    sureRelateSelect () {
      if (this.modalGameCouponCode) {
        this.relatedItem = this.modalRelatedItem
        this.formValidate.startTime = [this.relatedItem.listingTime.split(' ')[0], this.relatedItem.delistingTime.split(' ')[0]]
        this.formValidate.endTime = [this.relatedItem.listingTime.split(' ')[1], this.relatedItem.delistingTime.split(' ')[1]]
        this.formValidate.relatedGame = this.relatedItem.name
        this.formValidate.gameTicketPrice = this.relatedItem.price
        this.formValidate.pkgPrice = (Math.round(Number(this.formValidate.gameTicketPrice) * 100 + Number(this.formValidate.gameCoinPrice) * 100) / 100).toFixed(2) + ''
        this.formValidate.pkgBeginDate = this.relatedItem.listingTime.split(' ')[0]
        this.formValidate.pkgBeginTime = this.relatedItem.listingTime.split(' ')[1]
        this.formValidate.pkgEndDate = this.relatedItem.delistingTime.split(' ')[0]
        this.formValidate.pkgEndTime = this.relatedItem.delistingTime.split(' ')[1]
        this.gameCouponCode = this.relatedItem.gameCouponCode
        this.drawStatus = false
        this.$refs.formValidate.validateField('endTime', (valid) => { })
      } else {
        this.$Message.error('请选择优惠券')
      }
    },
    changeSelect (currentRow, oldCurrentRow) {
      if (this.relatedData.length > 0) {
        this.relatedData.forEach((item, idx) => {
          this.$set(this.relatedData[idx], '_highlight', false)
          if (currentRow.gameCouponCode === item.gameCouponCode) {
            this.modalGameCouponCode = currentRow.gameCouponCode
            this.modalRelatedItem = item
            this.$set(this.relatedData[idx], '_highlight', !this.relatedData[idx]['_highlight'])
            document.getElementsByClassName('radioMeal')[idx].checked = true
          }
        })
      }
    },
    selectrelatePage (page) {
      this.pageIndex = page
      this.getRelateList()
    },
    selectRelateSize (size) {
      this.pageIndex = 1
      this.pageSize = size
      this.getRelateList()
    },
    changeGameType (type) {
      this.relatedItem = {}
      this.relatedData = []
      this.formValidate.gameTicketPrice = '0.00'
      this.formValidate.relatedGame = ''
      this.gameCouponCode = ''
      this.formValidate.startTime = []
      this.formValidate.endTime = []
      this.formValidate.pkgPrice = (Number(this.formValidate.gameTicketPrice) * 100 + Number(this.formValidate.gameCoinPrice) * 100) / 100 + ''
    },
    changeMealType (type) {
      this.formValidate.way = []
      if (type === '0' || type === '1') {
        this.formValidate.way = ['1']
        this.formValidate.pkgPrice = this.formValidate.gameCoinPrice
      } else {
        // this.gameTicketSelect = true
      }
    },
    // 获取关联券列表
    getRelateList () {
      this.drawTableHeight = 0
      mealRelatedList({
        merchantId: this.$store.state.user.merchantId,
        shopId: this.$route.query.id,
        status: 3, // 已上架
        salesType: 2, // 打包销售
        type: Number(this.formValidate.gameType), // 游戏券类型
        offset: String(this.pageSize * (this.pageIndex - 1)),
        limit: String(this.pageSize)
      }).then(res => {
        if (res.data.status === 200) {
          this.totalRelated = res.data.totalCount
          this.relatedData = res.data.data
          if (this.relatedData.length > 0) {
            if (res.data.data && res.data.data.length > 10) {
              this.drawTableHeight = document.body.clientHeight - 190
            }
            this.relatedData.forEach((item, idx) => {
              this.$set(this.relatedData[idx], '_highlight', false)
              this.$nextTick(() => {
                document.getElementsByClassName('radioMeal')[idx].checked = false
              })
              if (this.modalGameCouponCode === item.gameCouponCode) {
                this.$set(this.relatedData[idx], '_highlight', !this.relatedData[idx]['_highlight'])
                this.$nextTick(() => {
                  document.getElementsByClassName('radioMeal')[idx].checked = true
                })
              }
            })
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    inputFocus () {
      if (this.formValidate.gameType) {
        this.drawStatus = true
        this.modalGameCouponCode = this.gameCouponCode
        this.getRelateList()
      } else {
        this.$Message.error('请先选择游戏券类型！')
      }
    },
    inputBlur () {
      // this.drawStatus = false
    },
    sorttable () {

    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '上传的图片大小不能超过500k'
      })
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '上传的图片格式错误'
      })
    },
    handleSuccess (response, file, fileList) {
      this.formValidate.imgUrl = response.full_img_url
    },
    // 保留整数
    changecoinNum () {
      this.formValidate.coinNum = this.formValidate.coinNum.replace(
        /^(0+)|[^\d]+/g,
        ''
      )
    },
    changeprice () {
      this.changeNum()
    },
    changeNum () {
      // 如果用户第一位输入的是小数点，则重置输入框内容
      if (
        this.formValidate.gameCoinPrice !== '' &&
        this.formValidate.gameCoinPrice.substring(0, 1) === '.'
      ) {
        this.formValidate.gameCoinPrice = ''
      }
      this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice.replace(
        /^0*(0\.|[1-9])/,
        '$1'
      ) // 粘贴不生效
      this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice.replace(
        /[^\d.]/g,
        ''
      ) // 清除“数字”和“.”以外的字符
      this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice.replace(
        /\.{2,}/g,
        '.'
      ) // 只保留第一个. 清除多余的
      this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice.replace(
        /^(-)*(\d+)\.(\d\d).*$/,
        '$1$2.$3'
      ) // 只能输入两个小数
      if (
        this.formValidate.gameCoinPrice.indexOf('.') < 0 &&
        this.formValidate.gameCoinPrice !== ''
      ) {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (
          this.formValidate.gameCoinPrice.substring(0, 1) === '0' &&
          this.formValidate.gameCoinPrice.length === 2
        ) {
          this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice.substring(
            1,
            this.formValidate.gameCoinPrice.length
          )
        }
      }
      if (this.formValidate.gameCoinPrice > 9999.99) {
        this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice.substring(0, 4)
      }
    },
    pricecoinNum () {
      this.formValidate.coinNum = this.formValidate.coinNum.replace(
        /^(0+)|[^\d]+/g,
        ''
      )
    },
    priceBlur () {
      this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice + ''
      this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice.replace(
        /[^\d.]/g,
        ''
      )
      if (this.formValidate.gameCoinPrice === '') {
        this.formValidate.gameCoinPrice = ''
      } else if (this.formValidate.gameCoinPrice.indexOf('.') === -1) {
        this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice + '.00'
      } else if (this.formValidate.gameCoinPrice.indexOf('.')) {
        let ste = this.formValidate.gameCoinPrice.substring(
          this.formValidate.gameCoinPrice.indexOf('.') + 1
        )
        if (!ste) {
          this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice + '00'
        }
        if (ste.length === 1) {
          this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice + '0'
        }
        if (ste.length > 2) {
          this.formValidate.gameCoinPrice = this.formValidate.gameCoinPrice.substring(
            0,
            this.formValidate.gameCoinPrice.indexOf('.') + 3
          )
        }
      }
    },
    selectstatus (val, index) {
      let myStatus = val.status
      this.$set(this.datalist[index], 'status', val.status)
      if (val.status) {
        openSalesPackage({
          shopId: this.$route.query.id,
          merchantId: this.$store.state.user.merchantId,
          pkgId: val.pkgId,
          status: 1
        }).then(res => {
          if (res.data.status === 200) {
            this.$Message.success(`套餐开启成功`)
            // this.getList()
          } else {
            this.$nextTick(() => {
              this.$set(this.datalist[index], 'status', !myStatus)
            })
            this.$Message.error(`${res.data.error}`)
          }
        })
      } else {
        openSalesPackage({
          shopId: this.$route.query.id,
          merchantId: this.$store.state.user.merchantId,
          pkgId: val.pkgId,
          status: 0
        }).then(res => {
          if (res.data.status === 200) {
            this.$Message.success(`套餐关闭成功`)
            // this.getList({ offset: (this.data.offset - 1) * this.data.limit })
          } else {
            this.$nextTick(() => {
              this.$set(this.datalist[index], 'status', !myStatus)
            })
            this.$Message.error(`${res.data.error}`)
          }
        })
      }
    },
    changeName () {
      this.formValidate.pkgName = this.formValidate.pkgName.replace(/\s+/g, '')
    },
    // 新增商品
    addpkg () {
      this.value3 = true
      this.isTrue = true
      this.title = '新增商品'
      this.formValidate.status = '1'
    },
    Reset () {
      this.value3 = false
    },
    Submit () {
      this.value3 = false
      // this.formValidate = {
      //   pkgName: '', // 套餐名字
      //   pkgPrice: '', // 收款金额
      //   pkgType: '', // 套餐类型
      //   coinNum: '', // 总出币数
      //   startTime: [],
      //   endTime: [],
      //   pkgBeginDate: '', // 开始日期
      //   pkgEndDate: '', // 结束日期
      //   pkgBeginTime: '', // 开始时间
      //   pkgEndTime: '', // 结束时间
      //   shopId: this.$route.query.id,
      //   merchantId: this.$store.state.user.merchantId,
      //   status: '', // 是否启用
      //   pkgDesc: '', // 说明
      //   creator: '' // 创建人
      // }
    },
    keyupNum (e) {
      e.target.value = e.target.value.replace(/\D/g, '')
    },
    // 切换每页条数时的回调
    selectSize (size) {
      this.data.limit = size
      this.getList()
    },
    // 获取分页列表
    getList (res) {
      this.loading = true
      this.tableHeight = 0
      getSalesPackageList({
        ...this.data,
        pkgTypes: this.pkgTypes,
        offset: (this.data.offset - 1) * this.data.limit
      }).then(res => {
        if (res.data.status === 200) {
          this.loading = false
          this.datalist = res.data.data
          this.datalist.forEach(ele => {
            this.$set(ele, 'sortShow', false)
          })
          this.total = res.data.totalCount
          if (res.data.data && res.data.data.length >= 10) {
            this.tableHeight = 520
          }
          this.datalist.forEach(ele => {
            ele.status = !!ele.status
          })
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 选择开始时间
    selectStartTime (val) {
      this.formValidate.pkgBeginDate = val[0]
      this.formValidate.pkgEndDate = val[1]
    },
    // 选择结束时间
    selectEndTime (val) {
      this.formValidate.pkgBeginTime = val[0]
      this.formValidate.pkgEndTime = val[1]
    },
    closed () {
      if (this.$refs.formValidate) {
        this.value3 = false
        this.formValidate.startTime = []
        this.formValidate.endTime = []
        this.$refs.formValidate.resetFields()
      } else {
        this.formValidate = {
          pkgName: '', // 套餐名字
          pkgPrice: '', // 收款金额
          pkgType: '', // 套餐类型
          coinNum: '', // 总出币数
          startTime: [],
          endTime: [],
          pkgBeginDate: '', // 开始日期
          pkgEndDate: '', // 结束日期
          pkgBeginTime: '', // 开始时间
          pkgEndTime: '', // 结束时间
          shopId: this.$route.query.id,
          merchantId: this.$store.state.user.merchantId,
          status: '', // 是否启用
          pkgDesc: '', // 说明
          creator: '' // 创建人
        }
      }
    },
    // 提交表单
    handleSubmit () {
      // if (this.isDisabled) {
      let data = {
        pkgName: this.formValidate.pkgName,
        pkgPrice: this.formValidate.pkgPrice,
        // pkgCoinPrice: this.formValidate.gameCoinPrice,
        pkgType: this.formValidate.pkgType,
        coinNum: this.formValidate.coinNum,
        pkgBeginDate: this.formValidate.pkgBeginDate,
        pkgEndDate: this.formValidate.pkgEndDate,
        pkgBeginTime: this.formValidate.pkgBeginTime,
        pkgEndTime: this.formValidate.pkgEndTime,
        shopId: this.$route.query.id,
        merchantId: this.$store.state.user.merchantId,
        pkgDesc: this.formValidate.pkgDesc,
        status: this.formValidate.status,
        creator: this.$store.state.user.userName,
        salesChannel: this.formValidate.way.length === 1 ? this.formValidate.way[0] : this.formValidate.way.reduce((p, t) => Number(p) + Number(t))
      }
      if (this.title === '新增商品') {
        let data1
        let rightsType = 0
        if (this.formValidate.rightsType && this.formValidate.rightsType.length) {
          rightsType = +this.formValidate.rightsType[0]
        }
        if (this.formValidate.pkgType === '4') {
          if (this.formValidate.way.indexOf('2') !== -1 || this.formValidate.way.indexOf('4') !== -1) {
            data1 = Object.assign({}, data, { gameCouponCode: this.gameCouponCode, pkgImage: this.formValidate.imgUrl, rightsType })
          } else {
            data1 = Object.assign({}, data, { gameCouponCode: this.gameCouponCode, rightsType })
          }
        } else if (this.formValidate.pkgType === '0') {
          data1 = Object.assign({}, data, { rightsType })
        } else {
          data1 = Object.assign({}, data)
        }
        this.$refs.formValidate.validate(val => {
          if (val) {
            if (this.isDisabled) {
              return
            }
            this.isDisabled = true
            setTimeout(() => {
              createSalesPackage(data1).then(res => {
                this.isDisabled = false
                if (res.data.status === 200) {
                  this.$Message.success('新增成功')
                  this.data.offset = 1
                  this.getList()
                  this.$refs.formValidate.resetFields()
                  this.value3 = false
                } else {
                  this.$Message.error(`${res.data.error}`)
                }
              })
            }, 200)
          }
        })
      } else if (this.title === '编辑商品') {
        let data2
        let rightsType = 0
        if (this.formValidate.rightsType && this.formValidate.rightsType.length) {
          rightsType = +this.formValidate.rightsType[0]
        }
        if (this.formValidate.pkgType === '4') {
          if (this.formValidate.way.indexOf('2') !== -1 || this.formValidate.way.indexOf('4') !== -1) {
            data2 = Object.assign({ pkgId: this.pkgId, creator: this.$store.state.user.userId }, data, { gameCouponCode: this.gameCouponCode, pkgImage: this.formValidate.imgUrl, rightsType })
          } else {
            data2 = Object.assign({ pkgId: this.pkgId, creator: this.$store.state.user.userId }, data, { gameCouponCode: this.gameCouponCode, rightsType })
          }
        } else if (this.formValidate.pkgType === '0') {
          data2 = Object.assign({ pkgId: this.pkgId, creator: this.$store.state.user.userId }, data, { rightsType })
        } else {
          data2 = Object.assign({ pkgId: this.pkgId, creator: this.$store.state.user.userId }, data)
        }
        this.$refs.formValidate.validate(val => {
          if (val) {
            if (this.isDisabled) {
              return
            }
            this.isDisabled = true
            setTimeout(() => {
              createSalesPackage(data2).then(res => {
                this.isDisabled = false
                if (res.data.status === 200) {
                  this.$Message.success('编辑成功')
                  this.getList()
                  this.$refs.formValidate.resetFields()
                  this.value3 = false
                } else {
                  this.$Message.error(`${res.data.error}`)
                }
              })
            }, 200)
          }
        })
      }
      // }
    },
    accAdd (arg1, arg2) {
      var r1, r2, m
      try { r1 = arg1.toString().split('.')[1].length } catch (e) { r1 = 0 }
      try { r2 = arg2.toString().split('.')[1].length } catch (e) { r2 = 0 }
      m = Math.pow(10, Math.max(r1, r2))
      return (arg1 * m + arg2 * m) / m
    },
    add () { },
    selectPage (page) {
      this.data.offset = page
      this.getList()
    },
    handleReset (name) {
      this.formValidate.startTime = []
      this.formValidate.endTime = []
      this.$refs.formValidate.resetFields()
      this.value3 = false
    },
    // 公用接口（详情编辑）
    commonInterface (idx) {
      lookSalesPackage({
        pkgCode: idx,
        shopId: this.$route.query.id,
        merchantId: this.$store.state.user.merchantId
      }).then(res => {
        if (res.data.status === 200) {
          this.gameCouponCode = res.data.data.gameCouponCode
          this.formValidate.pkgName = res.data.data.pkgName
          this.formValidate.pkgType = res.data.data.pkgType + ''
          this.formValidate.status = res.data.data.status + ''
          this.formValidate.pkgPrice = res.data.data.pkgPrice + ''
          this.channelName = res.data.data.salesChannelName.join(',')
          this.formValidate.way = res.data.data.salesChannelNumber.map(item => item + '')
          if (this.formValidate.pkgType === '4') {
            this.formValidate.relatedGame = res.data.data.gameCouponName
            this.formValidate.gameTicketPrice = res.data.data.gameCouponPrice
            this.formValidate.gameType = res.data.data.gameCouponType + ''
            this.formValidate.gameCoinPrice = (Math.round(res.data.data.pkgPrice * 100 - res.data.data.gameCouponPrice * 100) / 100).toFixed(2) + ''
            if (this.formValidate.way.indexOf('2') !== -1 || this.formValidate.way.indexOf('4') !== -1) {
              this.formValidate.imgUrl = res.data.data.pkgImage
            }
            this.formValidate.rightsType = res.data.data.rightsType ? [res.data.data.rightsType + ''] : []
          } else if (this.formValidate.pkgType === '0') {
            this.formValidate.rightsType = res.data.data.rightsType ? [res.data.data.rightsType + ''] : []
            this.formValidate.gameCoinPrice = res.data.data.pkgPrice + ''
          } else {
            this.formValidate.gameCoinPrice = res.data.data.pkgPrice + ''
          }

          this.formValidate.pkgDesc = res.data.data.pkgDesc
          this.formValidate.coinNum = res.data.data.coinNum + ''
          this.formValidate.startTime = [
            res.data.data.pkgBeginDate,
            res.data.data.pkgEndDate
          ]
          this.formValidate.endTime = [
            res.data.data.pkgBeginTime,
            res.data.data.pkgEndTime
          ]
          this.formValidate.pkgBeginDate = res.data.data.pkgBeginDate
          this.formValidate.pkgBeginTime = res.data.data.pkgBeginTime
          this.formValidate.pkgEndDate = res.data.data.pkgEndDate
          this.formValidate.pkgEndTime = res.data.data.pkgEndTime
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    detailsShow (idx) {
      this.value3 = true
      this.isTrue = false
      this.title = '查看商品'
      this.commonInterface(idx)
    },
    uptShow (idx, id) {
      this.formValidate.way = []
      this.value3 = true
      this.isTrue = true
      this.title = '编辑商品'
      this.pkgId = id
      this.commonInterface(idx)
    },
    ok (idx, row) {
      if (row.status) {
        this.$Message.error('请先停用后，再进行删除')
      } else {
        if (this.data.offset !== 1) {
          if (this.total % this.data.limit === 1) {
            this.data.offset = this.data.offset - 1
          }
        }
        setTimeout(() => {
          delSalesPackage({
            pkgId: idx,
            shopId: this.$route.query.id,
            merchantId: this.$store.state.user.merchantId
          }).then(res => {
            this.isDelete = true
            if (res.data.status === 200) {
              this.$Message.success('删除成功')
              this.data = {
                offset: 1,
                limit: 10,
                pkgTypes: '0,1,4',
                merchantId: this.$store.state.user.merchantId,
                shopId: this.$route.query.id
              }
              this.getList()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }, 200)
      }
    },
    cancel () { }
  }
}
</script>
<style lang="less" scoped>
.meal-set-shop {
  .content_page {
    height: 80px;
    line-height: 80px;
    display: flex;
    padding-right: 20px;
    flex-direction: row;
    justify-content: flex-end;
  }
}
</style>
<style lang="less">
.meal-set-shop {
  .ivu-drawer-body {
    height: calc(~'100% - 104px');
  }
}
/* .pkgDes {
  position: relative;
} */
/* .pkgDes .pkgDesc {
  position: absolute;
  right: 38px;
  bottom: 4px;
  font-size: 12px;
  display: inline-block;
  width: 60px;
  text-align: right;
  height: 14px;
  line-height: 14px;
  color: #c5c8ce;
} */
.meal-set-shop {
  .footer1 {
    width: 495px;
    position: fixed;
    z-index: 888;
    bottom: 0;
    right: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
}
.popupcontent_input {
  width: 280px;
}
.shopDrawer .shopDrawer_form {
  margin: auto;
  padding-top: 16px;
}
#shopDrawerLong .shopDrawer_form {
  width: 410px;
}
.shopDrawer_form_btn {
  width: 540px;
  position: fixed;
  z-index: 666;
  bottom: 0;
  right: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.shopDrawer .shopDrawer_form .shopDrawer_form_btn .ivu-form-item-content {
  text-align: right;
  padding-right: 24px;
}
.poptip_del .ivu-poptip-body .ivu-icon {
  left: 18px;
}
.shopDrawer .shop_detail {
  height: 100%;
}
.shopDrawer .shop_detail .shop_detail_bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: right;
  padding-top: 16px;
  border-top: 1px solid #e8eaec;
}
.shopDrawer .shop_detail .shop_detail_tit {
  // line-height: 32px;
  font-size: 12px;
  color: #464c5b;
  padding: 10px 50px;
  display: flex;
}
.shopDrawer .shop_detail .shop_detail_tit .shop_detail_tit_name {
  margin-right: 10px;
  display: inline-block;
  width: 70px;
  text-align: right;
}
.shopDrawer .shop_detail .shop_detail_tit .shop_detail_tit_info {
  flex: 1;
}
.collection-productdesc {
  max-height: 38px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
